<template>
  <el-dialog
    class="custom-dialog"
    :append-to-body="options.appendToBody"
    :close-on-click-modal="false"
    v-model="options.visible"
    :title="options.title"
    :width="options.width"
    :top="options.top || '15vh'"
    @open="open"
    @close="beforeClose"
  >
    <slot></slot>

    <template #footer>
      <slot name="footer">
        <span class="dialog-footer">
          <el-button @click="handleClose">{{ options.cancelText || '取消' }}</el-button>
          <el-button type="primary" @click="handleConfirm">
            {{ options.confirmText || '确定' }}
          </el-button>
        </span>
      </slot>
    </template>
  </el-dialog>
</template>

<script>
  // import { ElDialog, ElButton } from 'element-plus';
  export default {
    emits: ['open', 'close', 'beforeClose', 'confirm'],
    props: {
      options: {
        type: Object,
        required: true,
        default: {
          width: 648, //宽度
          title: '标题', //标题
          modal: false, //遮罩
          visible: false, //控制显示
          cancelText: '取消', //取消按钮文字
          confirmText: '确定', //确定按钮颜色
        },
      },
    },
    // components: { ElDialog, ElButton },
    data() {
      return {};
    },
    computed: {},
    watch: {},
    methods: {
      open() {
        this.$emit('open');
      },
      handleClose() {
        this.options.visible = false;
        // this.$emit('close');
        // this.$forceUpdate();
      },
      handleConfirm(formEl) {
        this.$emit('confirm', formEl);
      },
      beforeClose() {
        this.$emit('beforeClose');
      },
    },
  };
</script>

<style lang="scss">
  .custom-dialog {
    .el-dialog__header {
      border-bottom: 1px solid #ebebeb;
      margin-right: 0;
      .el-dialog__title {
        font-size: 16px;
      }
    }
    .el-dialog__body {
      padding: 0;
    }
    .el-dialog__footer {
      padding: 24px 20px 20px 20px;
    }
  }
</style>
